<template>
	<view class='ws-page'>
		<view class="ws-book-catalog-header">
			<view class='ws-book-name'>{{bookcatalog.name}}</view>
			<image class='sort-catalog-img' src="../../../static/images/sort.png" mode="aspectFit" @click='sortCatalogList'></image>
		</view>
		<view class="ws-book-catalog">
			<view class="ws-book-catalog-list">
				<view class="ws-book-catalog-lis" v-for="(item,index) in bookcatalog.list" :key='index' >
					<view class="ws-book-catalog-lis-name">
						{{item.name}}
					</view>
					<view class="ws-book-catalog-li" 
					 :class='{"selectCatalog":collectCatalogId===book.id}'
					 v-for="book in item.list" 
					 :key='book.id' 
					 @click='watchBookEvent(book.id)' >
						{{book.name}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		    this.bookId = option.bookid
			this.getbookCataLog()
		},
		onShow(){
			this.collectCatalogId = uni.getStorageSync(this.bookId)
		},
		data() {
			return {
				bookId:null,
				bookcatalog:[],
				collectCatalogId:null
			}
		},
		methods: {
			async getbookCataLog(){
				const data = await this.$https({
					url:`book/${this.bookId}/list`
				})
				if(data&&data.code===200){
					this.bookcatalog = data.data
				}else{
					this.bookcatalog = null
				}
			},
			sortCatalogList(){
				if(this.bookcatalog){
					this.bookcatalog.list.reverse()
					this.bookcatalog.list.forEach(item=>{
						item.list.reverse()
					})
				}
			},
			watchBookEvent(catalogid){
				uni.redirectTo({
				    url: `/pages/books/bookcontent/bookcontent?bookid=${this.bookId}&catalogId=${catalogid}`
				});
			}
		}
	}
</script>

<style lang="scss">
	.ws-page{
		padding:30rpx;
		padding-top:80rpx;
		.ws-book-catalog-header{
			text-align: center;
			position: fixed;
			top:0;
			left:0;
			width:100%;
			background:#f9fbe0;
			padding:12px 0;
			.ws-book-name{
				font-size:40rpx;
				color:#333;
				line-height: 60rpx;
			}
			.sort-catalog-img{
				position: absolute;
				top:40rpx;
				right:30rpx;
				width:40rpx;
				height:40rpx;
			}
		}
		.ws-book-catalog{
			margin-top:20rpx;
			.ws-book-catalog-list{
				min-height: 400rpx;
				overflow: hidden;
				.ws-book-catalog-lis{
					.ws-book-catalog-lis-name{
						font-size:36rpx;
						color:#666;
						line-height: 80rpx;
					}
					.ws-book-catalog-li{
						font-size:32rpx;
						color:#666;
						line-height: 100rpx;
						border-bottom:1px solid #ddd;
						&.selectCatalog{
							color:#00D6B6;
						}
					}
				}
			}
		}
	}
</style>
